// 主要负责定义全局的样式，如颜色、字体大小

@use 'sass:map';

// 主题色
$colors: (
  primary: #409eff,
  success: #67c23a,
  warning: #e6a23c,
  danger: #f56c6c,
  info: #909399
);

:root {
  color-scheme: light;
  --vt-color-white: #ffffff;
  --vt-color-black: #000000;

  @each $var, $color in $colors {
    --vt-color-#{$var}:#{$color};

    @for $n from 1 through 4 {
      // 3 5 7 9
      // --vt-color-primary-light-3:...
      --vt-color-#{$var}-light-#{$n*2+1}:#{mix(#fff, $color, (($n * 2 + 1) * 10 * 1% ))};
      //  #{mix(#fff, $color, (($n*2+1)*10*10%))};
      // #{$color}

    }

    --vt-color-#{$var}-drak-2:#{mix(#000,$color,20%)};
  }

  $text-color: (
    ) !default;
  $text-color: map.merge(('primary': #303133,
        'regular': #606266,
        'secondary': #909399,
        'placeholder': #a8abb2,
        'disabled': #c0c4cc,
      ),
      $text-color
  );

// text color
@each $attr, $val in $text-color {
  --vt-text-color-#{$attr}:#{$val};
}

// font-size
--vt-font-size-extra-small:12px;
--vt-font-size-small:13px;
--vt-font-size-base:14px;
--vt-font-size-medium:16px;
--vt-font-size-large:18px;
--vt-font-size-extra-large:18px;
--vt-font-family:"Inter,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,\5fae\8f6f\96c5\9ed1,Arial,sans-serif";

// size
--vp-screen-max-width: 1482px;
// --vp-sidebar-width-small: 290px;
--vp-sidebar-width-small: 245px;

// notification
--vt-notification-border-color:var(--vt-color-info-light-7);
--vt-notification-bg-color:var(--vt-color-white);
--vt-notification-title-color:var(--vt-text-color-primary);
--vt-notification-close-color:var(--vt-color-info-light-3);
--vt-notification-close-hover-color:var(--vt-color-info-light);

// skeleton
--vt-border-radius-base: 4px;
--vt-skeleton-circle-size: 50px // empty
--vt-empty-image-width:160px


}